<template>
  <div class="rich-text-editor-container">
    <div style="border-bottom: 1px solid #dcdfe6;">
      <Toolbar
        style="border-bottom: 0;"
        :editor="editorRef"
        :default-config="toolbarConfig"
        :mode="mode"
      />
    </div>
    <Editor
      style="height: 350px; overflow-y: auto;"
      :default-config="editorConfig"
      :mode="mode"
      v-model="editorHtml"
      @on-created="handleCreated"
      @on-change="handleChange"
      @on-blur="handleBlur"
    />
  </div>
</template>

<script setup>
import { ref, shallowRef, onBeforeUnmount, watch, onMounted } from 'vue'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  mode: {
    type: String,
    default: 'default' // 'default' | 'simple'
  },
  placeholder: {
    type: String,
    default: '请输入内容...'
  },
  readOnly: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'change', 'blur'])

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内部维护的HTML值
const editorHtml = ref('')

// 工具栏配置
const toolbarConfig = {
  excludeKeys: [
    'insertVideo', // 排除视频插入
    'insertImage', // 排除图片插入
    'uploadImage', // 排除图片上传
    'group-image', // 排除所有图片相关功能
    'group-video', // 排除所有视频相关功能
    'group-more-style', // 排除更多样式选项
    'emotion', // 排除表情
    'fullScreen' // 排除全屏功能
  ]
}

// 编辑器配置
const editorConfig = {
  placeholder: props.placeholder,
  readOnly: props.readOnly,
  autoFocus: false,
  MENU_CONF: {
    // 字体配置
    fontSize: {
      // 字号选项
      fontSizeList: ['12px', '14px', '16px', '18px', '20px', '24px', '28px'],
    },
    // 标题配置
    head: {
      // h1-h6 的元素，要以 <配置属性名>: <标题标签名> 的形式添加
      titleFontSize: '18px',
      h1FontSize: '28px',
      h2FontSize: '24px',
      h3FontSize: '20px',
      h4FontSize: '18px',
      h5FontSize: '16px',
      h6FontSize: '14px',
    },
    // 设置颜色选择面板颜色
    colorPicker: {
      colors: [
        '#000000', 
        '#333333', 
        '#666666', 
        '#999999', 
        '#cccccc', 
        '#eeeeee', 
        '#f5f5f5', 
        '#ffffff',
        '#61a951', 
        '#16a085', 
        '#07a9fe', 
        '#003ba5', 
        '#8e44ad', 
        '#f32784', 
        '#c0392b', 
        '#d35400', 
        '#f39c12', 
        '#fdda00'
      ]
    }
  },
  hoverbarKeys: {
    link: {
      showMenuKeys: [
        'editLink',
        'unLink',
        'viewLink'
      ]
    },
    table: {
      showMenuKeys: [
        'insertTableRow',
        'deleteTableRow',
        'insertTableCol',
        'deleteTableCol',
        'deleteTable'
      ]
    },
    codeBlock: {
      showMenuKeys: [
        'editCodeBlock',
        'deleteCodeBlock'
      ]
    }
  }
}

// 处理编辑器创建完成
const handleCreated = (editor) => {
  editorRef.value = editor // 记录编辑器实例
  
  // 如果有初始值，设置到编辑器
  if (props.modelValue) {
    editor.setHtml(props.modelValue)
  }
}

// 编辑器内容变化时的回调函数
const handleChange = (editor) => {
  editorHtml.value = editor.getHtml()
  emit('update:modelValue', editor.getHtml())
  emit('change', editor.getHtml())
}

// 失去焦点时的回调
const handleBlur = (editor) => {
  emit('blur', editor.getHtml())
}

// 监听外部值变化，同步到编辑器
watch(() => props.modelValue, (newValue) => {
  if (newValue !== editorHtml.value && editorRef.value) {
    editorHtml.value = newValue
    editorRef.value.setHtml(newValue)
  }
})

// 组件挂载后初始化
onMounted(() => {
  // 初始化值
  editorHtml.value = props.modelValue
})

// 组件销毁时，销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
</script>

<style>
.rich-text-editor-container {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.rich-text-editor-container .w-e-toolbar {
  background-color: #f5f7fa;
  padding: 5px 0;
}

.rich-text-editor-container .w-e-text-container {
  background-color: #fff;
}

.rich-text-editor-container .w-e-text {
  padding: 8px 12px;
  min-height: 300px;
}

/* 工具栏样式优化 */
.rich-text-editor-container .w-e-bar-item {
  padding: 0 3px;
}

.rich-text-editor-container .w-e-bar-item .w-e-icon {
  font-size: 16px;
}

.rich-text-editor-container .w-e-bar-item:hover {
  background-color: #e6f1fc;
}

/* 添加滚动条样式 */
.rich-text-editor-container ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.rich-text-editor-container ::-webkit-scrollbar-thumb {
  background-color: #c0c4cc;
  border-radius: 4px;
}

.rich-text-editor-container ::-webkit-scrollbar-track {
  background-color: #f5f7fa;
}
</style> 